1.说一说你平时写代码遵守的编码规范
- 语义化
·语义化标签优先
·基于功能命名、基于内容命名、基于表现命名
·简略、明了、无后患
html命名规范：
- 所有命名都使用英文小写
推荐：<div class="main"></div>
不推荐： <div class="Main"></div>
- 命名用引号包裹
推荐：<div id="header"></div>
不推荐： <div id=header></div>
- 用中横线连接
推荐：<div class="mod-modal"></div>
不推荐： <div class="modModal"></div>
- 命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
推荐：<div class="text-lesser"></div>
不推荐： <div class="light-grey"></div>
常见的命名1：
.wrap或.wrapper – 用于外侧包裹
.container或 .ct – 包裹容器
.header – 用于头部
.body – 页面 body
.footer – 页面尾部
.aside、.sidebar – 用于侧边栏
.content – 和header footer 对应，用于主要内容
.navigation – 导航元素
.pagination – 分页常见命名2:
.tabs > .tab – tab 切换
.breadcrumbs – 导航列表、面包屑
.dropdown – 下拉菜单
.article – 文章
.main – 用于主体
.thumbnail – 头像，小图像
.media – 媒体资源
.panel – 面板
.tooltip – 鼠标放置上去的提示
.popup – 鼠标点击弹出的提示
常见命名3
.button、.btn – 按钮
.ad – 广告
.subnav – 二级导航
.menu – 菜单
.tag – 标签
.message或者.notice – 提示消息
.summary – 摘要
.logo – logo
.search – 搜索框
.login – 登录常见命名4
.register – 注册
.username – 用户名
.password – 密码
.banner – 广告条
.copyright – 版权
.modal或者 .dialog – 弹窗
*常见命名5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80var 名字 = {
状态类: [
'inverse',
'toggled',
'switched',
'original',
'initial',
'identified',
'disabled',
'loading',
'pending',
'syncing',
'default'
],
修饰类: [
'dark',
'light',
'shaded',
'flat',
'ghost',
'maroon',
'pale',
'intense',
'twisted',
'narrow',
'wide',
'smooth',
'separate',
'clean',
'sharp',
'aligned'
],
元素类: [
'pagination',
'modal',
'popup',
'article',
'story',
'flash',
'status',
'state',
'media',
'block',
'card',
'teaser',
'badge',
'label',
'sheet',
'poster',
'notice',
'record',
'entry',
'item',
'figure',
'square',
'module',
'bar',
'button',
'action',
'knob'
],
布局类: [
'navigation',
'wrapper',
'inner',
'header',
'footer',
'aside',
'section',
'divider',
'content',
'container',
'panel',
'pane',
'construct',
'composition',
'spacing',
'frame'
]
}
css命名规范
- 书写规范
1.tab 用两个空格表示
2.css的 :后加个空格， {前加个空格
3.每条声明后都加上分号
4.换行，而不是放到一行
5.颜色用小写，用缩写, #fff
6.小数不用写前缀, 0.5s -> .5s；0不用加单位
7.尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
范例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}
/* Not recommended */
h3 {
font-weight:bold;
}
/* Recommended */
h3 {
font-weight: bold;
}
/* Not recommended: missing space */
#video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
margin-top: 1em;
}
/* Recommended */
#video {
margin-top: 1em;
}
/* Not recommended */
a:focus, a:active {
position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
/* Always put a blank line (two line breaks) between rules. */
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
/* Not recommended */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
参考
2.垂直居中有几种实现方式，给出代码范例
方法三.vertical-align实现居中
注意vertical-align: middle;必须作用于表格，行内元素才生效